<template>
  <div id="app">
    <hr>
    <h1>counter:{{counter}}</h1>
    <hr>
    <button @click="decrementAction">-1</button>
    <button @click="incrementAction">+1</button>
  </div>
</template>

<script>
import { useState } from "../hooks/useState";
import { onMounted } from "vue";
import { useStore, mapActions } from "vuex";
export default {
  setup() {
    // 从vuex中拿到counter
    const storeState = useState(["counter"]);
    // 从actions中取出函数
    const Actions1Fn = mapActions(["incrementAction", "decrementAction"]);
    // 创建store实例
    const store = useStore();
    onMounted(async () => {
      try {
        const promise = await store.dispatch("getHomeMultidata");
        console.log(promise);
      } catch (err) {
        console.log(err);
      }
    });
    return {
      ...storeState,
      ...Actions1Fn,
    };
  },
};
</script>

<style lang="less">
#app {
  text-align: center;
}
</style>
